<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript+html5完整版打字游戏</title>
	<script type="text/javascript" src="js/Letters.js"></script>
	<script type="text/javascript" src="js/draw.js"></script>

	<script type="text/javascript">
		var canvas;
		var ctx;
		var dr;//绘画类实例
		var keyDown;//按键对象
		var capsLock;//大写按键判断
		var st;//游戏开始
		var stBtn_s;//开始按钮
		var rdBtn_r;//鼠标经过说明按钮
		var lastTime;//最后时间
		var detalTime;//时间间隔
		var now;//当前时间
		var speed;//速度
		var score;//分数
		window.requestAnimFrame=(function(){
			return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
					return window.setTimeout(callback, 1000 / 60);
				};
		})();//自动执行函数

		window.onload=function(){
			document.body.onload=game();//程序入口

			//入口函数
			function game(){
				init();
				gameLoop();//刷新函数
			}
			//初始化函数
			function init(){
				canvas=document.getElementById('canvas');
				ctx=canvas.getContext('2d');//画笔
				canvas.width=632;
				canvas.height=472;
				startDraw();//加载开始界面
				lastTime=Date.now();//控制requesAnimFrame播放速度
				detalTime=0;//时间间隔，保证运动过渡圆滑
				speed=2;
				score=0;//0分

				//鼠标事件
				window.addEventListener('mousemove',function(e){
					if(e.offSetX||e.layerX){//兼容性写法
						//三元运算符
						mx=e.offSetX==undefined?e.layerX:e.offSetX;
						my=e.offSetY==undefined?e.layerY:e.layerY;
					}
					//开始按钮
					if(mx>20&&mx<156&&my>350&&my<397){
						stBtn_s=true;
					}
					else if(mx>20&&mx<156&&my>410&&my<457){
						rdBtn_r=true;
					}
					else
					{
						stBtn_s=false;
						rdBtn_r=false;
					}
					if(st){
						ctx.save();
						ctx.font = "12px Courier New";
						ctx.fillStyle ='red';
						if(mx>642&&mx<668&&my>120&&my<130){
							canvas.style.cursor='pointer';
							ctx.fillText('黄色',642,130);
						}
						else if(mx>692&&mx<712&&my>120&&my<130){
							canvas.style.cursor='pointer';
							ctx.fillText('红色',692,130);
						}
						else if(mx>642&&mx<668&&my>160&&my<170){
							canvas.style.cursor='pointer';
							ctx.fillText('蓝色',642,170);
						}
						else if(mx>692&&mx<712&&my>160&&my<170){
							canvas.style.cursor='pointer';
							ctx.fillText('绿色',692,170);
						}
						else{
							canvas.style.cursor='default';
							ctx.beginPath();
							//设置字体样式
						    ctx.font = "12px Courier New";
						    //设置字体填充颜色
						    ctx.fillStyle ='blue';
						    //从坐标点(50,50)开始绘制文字
						    ctx.fillText('请选择字母颜色',642,100);
						    ctx.fillText('黄色',642,130);
						    ctx.fillText('红色',692,130);
						    ctx.fillText('蓝色',642,170);
						    ctx.fillText('绿色',692,170);
							ctx.closePath();
						}
						ctx.restore();
					}
				},false);
				//鼠标点击
				window.addEventListener('click',function(e){
					if(e.offSetX||e.layerX){//兼容性写法
						//三元运算符
						mx=e.offSetX==undefined?e.layerX:e.offSetX;
						my=e.offSetY==undefined?e.layerY:e.layerY;
					}
					if(mx>20&&mx<156&&my>350&&my<397){
						canvas.width=732;
						canvas.height=472;
						st=true;
					}
					else if(mx>20&&mx<156&&my>410&&my<457){
						rdBtn_r=true;
					}
					if(st){
						for(var i=0;i<dr.le.length;i++){
							if(mx>642&&mx<668&&my>120&&my<130){
								dr.le[i].fColor='yellow';
							}
							else if(mx>692&&mx<712&&my>120&&my<130){
								dr.le[i].fColor='red';
							}
							else if(mx>642&&mx<668&&my>160&&my<170){
								dr.le[i].fColor='blue';
							}
							else if(mx>692&&mx<712&&my>160&&my<170){
								dr.le[i].fColor='green';
							}
						}
					}
					
				},false);

				dr=new draw();//draw实例
				dr.ctx=ctx;//画笔
				dr.init();
				dr.ImgDraw();
				

				//按键事件
				keyDown={};
				capsLock=false;//没打开大写键
				window.addEventListener('keydown',function(e){
					e=event||window.event;
					//shift组合大写按键
					var capsLockKey = e.keyCode ? e.keyCode : e.which;
					var shifKey = e.shiftKey ? e.shiftKey:((capsLockKey == 16) ? true : false);
					if(((capsLockKey >= 65 && capsLockKey <= 90) && !shifKey)||((capsLockKey >= 97 && capsLockKey <= 122) && shifKey)){
					    var zh=true;
					}else{
					    zh=false;
					}
					keyDown[e.keyCode]=true;
					for(var i=0;i<dr.le.length;i++){
						if(capsLock==false&&zh==true){//大写锁未打开且没有按下shift键(组合键)
							if(String.fromCharCode(e.keyCode).toLocaleLowerCase()==dr.le[i].lett){//字母区分大小写
								dr.born(i);//重新生成
								level();
							}
						}
						else{//按下shift键或者大写锁已经打开
							if(String.fromCharCode(e.keyCode)==dr.le[i].lett){
								dr.born(i);//重新生成
								level();
							}
						}
						if(e.keyCode==20){//由于javascript是事件监听，所以无法知道按下大写锁前键盘大写锁是否已经打开
							//(当做未打开），搞着玩的,可以忽略。
							if(capsLock==false){
								ctx.clearRect(632,30,232,55);
								this.ctx.save();
							    this.ctx.font = "14px Courier New";
							    this.ctx.fillStyle ='yellow';
							    this.ctx.fillText('大写锁开启',642,50);
								this.ctx.restore();
								capsLock=true;
								return;
							}
							else{
								ctx.clearRect(632,30,232,55);
								this.ctx.save();
							    this.ctx.font = "14px Courier New";
							    this.ctx.fillStyle ='yellow';
							    this.ctx.fillText('大写锁关闭',642,50);
								this.ctx.restore();
								capsLock=false;
								return;
							}
						}
						
					}
				});
				window.addEventListener('keyup',function(e){
					delete keyDown[e.keyCode];//释放按键对象
				});				
			}
			//自动刷新函数
			function gameLoop(){
				requestAnimFrame(gameLoop);
				if(st){
					now=Date.now();//当前循环时间
					detalTime=now-lastTime;
					lastTime=now; //将最后时间变为上一次初始时间
					//谷歌浏览器离开标签后，动画帧会停止，导致时间差加大
					if(detalTime>40){
						detalTime=40;
					}
					dr.ImgDraw();
							
				}else{
					startDraw();//加载开始界面
				}
			}
			//开始游戏界面函数
			var yb=220;
			function startDraw(){
				var p=new Image();//开始背景
				var bee=new Image();//蜜蜂
				var stBtn=new Image();//开始按钮
				var rdBtn=new Image();//说明按钮
				var f=new Image();//说明按钮
				var stBtn2=new Image();
				var rdBtn2=new Image();
				
				stBtn2.src='images/开始按钮[经过].png';
				rdBtn2.src='images/说明按钮[经过].png';
				p.src='images/bg2.png';
				bee.src='images/卡通飞虫[图形].png';
				stBtn.src='images/开始按钮[初始].png';
				rdBtn.src='images/说明按钮[初始].png';
				f.src='images/游戏名称.png';

				ctx.drawImage(p,0,0,632,472);
				ctx.drawImage(bee,136,yb-=0.5,131,97);
				if(yb<=170){yb=220;}
				ctx.drawImage(stBtn,20,350,136,47);
				ctx.drawImage(rdBtn,20,410,136,47);
				if(stBtn_s){
					ctx.drawImage(stBtn2,20,350,136,47);
				}
				if(rdBtn_r){
					ctx.drawImage(rdBtn2,20,410,136,47);
				}
				ctx.drawImage(f,140,50,426,106);
			}
			//分数，关卡
			function level(){
				score++;
				ctx.save();
				ctx.clearRect(632,200,232,200);
				ctx.font = "12px Courier New";
			    ctx.fillStyle ='#fff';
			    ctx.fillText('分数：'+score+'',642,220);
			    ctx.clearRect(632,239,232,200);
				if(score>=20&&score<50){
					speed=4;
					ctx.fillText('第二关',642,240);
				}
				if(score>=50&&score<100){
					speed=6;
					ctx.fillText('第三关',642,240);
				}
				if(score>=100&&score<200){
					speed=8;
					ctx.fillText('第四关',642,240);
				}
				else if(score>=200){
					st=false;
					location.reload();//不会处理结束，所以只好强制刷新浏览器
				}
				ctx.restore();
			}

		}
	</script>
</head>
<body>
	<div style="width: 732px;height: 472px;margin:50px auto;">
		<canvas id="canvas" style="background: #000;"></canvas>
	</div>
</body>
</html>